<template>
    <div class="view-wrapper">
      <div class="head">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
          <el-form-item label="卡查询" prop="card">
            <el-input v-model="queryParams.card" placeholder="卡名称\卡编号\交易单号\第三方订单号" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="用户查询" prop="customer">
            <el-input v-model="queryParams.customer" placeholder="用户姓名\联系方式" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
  
          <el-form-item label="结算单号" prop="settlementNo">
            <el-input v-model="queryParams.settlementNo" placeholder="请输入" />
          </el-form-item>
  
          <el-form-item label="交易时间">
            <el-date-picker clearable v-model="date" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="changeTime"
              placeholder="选择交易时间">
            </el-date-picker>
          </el-form-item>
          <!-- <el-form-item label="发行方" prop="issuerId">
            <el-select v-model="queryParams.issuerId" placeholder="请选择" clearable style="width: 240px">
              <el-option v-for="dict in issuerSelectList" :key="dict.id" :label="dict.name" :value="dict.id" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="发行店铺" prop="merchantIdList">
            <el-select v-model="queryParams.merchantIdList" placeholder="请选择" multiple filterable clearable style="width: 240px">
              <el-option v-for="dict in merchantList" :key="dict.id" :label="dict.value" :value="dict.id" />
            </el-select>
          </el-form-item>
  
          <el-form-item label="结算状态" prop="settlementStatus">
            <el-select v-model="queryParams.settlementStatus" placeholder="请选择" clearable style="width: 240px">
              <el-option v-for="dict in settlementStatusList" :key="dict.id" :label="dict.value" :value="dict.id" />
            </el-select>
          </el-form-item>
  
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="listBox">
        <div style="margin-bottom: 14px">
          <export-excel-button title="订单列表" :type="'2'" action="/merchant/lucrative/equity/card/order/export" :params="ExportParams" />
        </div>
        <el-table v-loading="loading" :data="issueOrderList" stripe border @selection-change="handleSelectionChange">
          <el-table-column type="index" label="序号" width="55" align="center" fixed />
          <el-table-column label="卡编号" align="center" prop="cardNo" :show-overflow-tooltip="true" />
          <el-table-column label="卡名称" align="center" prop="cardName" :show-overflow-tooltip="true" />
          <el-table-column label="发行店铺" align="center" prop="shopName" :show-overflow-tooltip="true" />
          <el-table-column label="交易单号" align="center" prop="orderNo" :show-overflow-tooltip="true" />
          <el-table-column label="第三方订单号" align="center" prop="thirdOrderNo" :show-overflow-tooltip="true" />
          <el-table-column label="交易流水" align="center" prop="thirdPartyNo" :show-overflow-tooltip="true" />
          <el-table-column label="交易时间" align="center" prop="transactionTime" :show-overflow-tooltip="true" />
          <el-table-column label="用户姓名" align="center" prop="customerName" :show-overflow-tooltip="true" />
          <el-table-column label="联系方式" align="center" prop="customerPhone" :show-overflow-tooltip="true" />
          <el-table-column label="售价" align="center" prop="price" :show-overflow-tooltip="true" />
          <el-table-column label="交易金额" align="center" prop="orderMoney" :show-overflow-tooltip="true" />
          <el-table-column label="积分抵扣" align="center" prop="deductibleIntegral" :show-overflow-tooltip="true" />
          <el-table-column label="平台补贴" align="center" prop="platformSubsidy" :show-overflow-tooltip="true"  :render-header="renderHeader"/>
          <el-table-column label="实付金额" align="center" prop="payMoney" :show-overflow-tooltip="true" />
          <el-table-column label="服务费（￥）" align="center" prop="serviceFee" :show-overflow-tooltip="true"  :render-header="renderHeader"/>
          <el-table-column label="费率（%）" align="center" prop="serviceRatio" :show-overflow-tooltip="true" />
          <el-table-column label="支付手续费（￥）" align="center" prop="payFee" :show-overflow-tooltip="true"  :render-header="renderHeader"/>
          <el-table-column label="平台收入（￥）" align="center" prop="platformIncome" :show-overflow-tooltip="true"  :render-header="renderHeader"/> 
          <el-table-column label="商户收入（￥）" align="center" prop="merchantIncome" :show-overflow-tooltip="true"  :render-header="renderHeader"/>
          <el-table-column label="邀请人" align="center" prop="referrer" :show-overflow-tooltip="true" />
          <el-table-column label="核销店铺" align="center" prop="verificationShopName" :show-overflow-tooltip="true" />
          <el-table-column label="结算店铺" align="center" prop="settlementShopName" :show-overflow-tooltip="true" />
          <el-table-column label="结算单号" align="center" prop="settlementNo" :show-overflow-tooltip="true" />
          <el-table-column label="结算状态" align="center" prop="settlementStatus" :show-overflow-tooltip="true" />
           
          <el-table-column label="奖励CoCo" align="center" prop="awardCocoAmount" :show-overflow-tooltip="true" />
          <el-table-column label="奖励椰分" align="center" prop="awardYfAmount" :show-overflow-tooltip="true" />
          <el-table-column label="奖励勋章" align="center" prop="awardCardName" :show-overflow-tooltip="true" />
        </el-table>
  
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </div>
  
  
      <Dialog ref="dialog" @refresh="getList"></Dialog>
    </div>
  </template>
  
  <script>
    import {
      issuerSelectList,
    } from "@/api/equityManager/equityCard";
    import {
      shopSelect,
      issueOrderList,
    } from "@/api/merchantsNFR/nfrIssue";
    import {
      orderList,
    } from "@/api/merchantsNFR/yeCard";
    import {
      adminDict,
      listEquityCardBill,
      delEquityCardBill,
      exportEquityCardBill
    } from "@/api/equityCardBill";
    import Dialog from "@/views/moneyManagement/equityCardBill/dialog";
    import ExportExcelButton from "@/components/ExportExcelButton/index";
  
    export default {
      name: "EquityCardBill",
      // dicts: ['equity_card_bill_type'],
      components: {
        ExportExcelButton,
        Dialog
      },
      props: {
        settleNo: String, //结算单号
      },
      data() {
        return {
          // 遮罩层
          loading: false,
          // 导出遮罩层
          exportLoading: false,
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          // 显示搜索条件
          showSearch: true,
          // 总条数
          total: 0,
          // 数字权益卡购卡账单查询表格数据
          issueOrderList: [],
          // 查询参数
          queryParams: {
            card: '', //卡名称/卡编号
            customer: '', //	用户姓名/联系方式
            issuerId: '', //	发行方id
            merchantIdList: [], //	发行店铺
            pageNum: 1,
            pageSize: 10,
            endDate: '',
            startDate: '',
            settlementNo: '', //结算单号
            settlementStatus: '', //结算状态 字典 shenye_equity_card_bill_settle_status
          },
          date: [],
          equityType: [],
          issuerSelectList: [],
          merchantList: [],
          settlementStatusList: [], //结算状态数组 字典 shenye_equity_card_bill_settle_status
        };
      },
      computed: {
        ExportParams() {
          const params = {
            ...this.queryParams,
          };
          return params;
        },
      },
      created() {
        this.getlinkagelist()
        this.getMerchantList()
        this.getShop()
        if (this.$route.query.settleNo != undefined && this.$route.query.settleNo != '') {
          this.queryParams.settlementNo =this.$route.query.settleNo
        }
        var query = this.$route.query.name
        if (query) {
          this.queryParams.query = query
        }
        this.getList();
      },
  
      methods: {
        //获取店铺下拉
        getShop() {
          shopSelect().then(res => {
            this.merchantList = res.result
          })
        },
        //获取发行方列表
        getMerchantList() {
          let data = {}
          issuerSelectList(data).then(res => {
            this.issuerSelectList = res.result
          }).catch(() => {
  
          });
          // .finally(() => {
  
          // });
        },
        getlinkagelist() {
          //获取商户类型字典
          const params = {
            dictType: "merchant_equity_card_type,merchant_equity_card_settle_status",
          };
          adminDict(params).then((res) => {
            this.equityType = res.result[0].dictList;
            this.settlementStatusList = res.result[1].dictList;
          });
        },
        /** 查询数字权益卡购卡账单查询列表 */
        getList() {
          this.loading = true;
          orderList(this.queryParams).then(response => {
            response.result.records.forEach(item => {
              for (var key in item) {
                if (item[key]==='') {
                  item[key] = "-";
                }
              }
            });
          this.issueOrderList = response.result.records;
            this.total = response.result.total;
            this.loading = false;
          });
        },
        // 表单重置
        reset() {
          this.queryParams = {
            pageNum: 1,
            pageSize: 10,
            query: '',
            endDate: '',
            startDate: '',
            card: '', //卡名称/卡编号
            customer: '', //	用户姓名/联系方式
            issuerId: '', //	发行方id
            merchantIdList: [], //	发行店铺
          };
          this.date = []
        },
        changeTime(time) {
          if (!time) {
            this.date = []
            this.queryParams.startDate = ''
            this.queryParams.endDate = ''
          } else {
            this.queryParams.startDate = this.date[0]
            this.queryParams.endDate = this.date[1]
          }
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.reset()
          this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
          this.ids = selection.map(item => item.id)
          this.single = selection.length !== 1
          this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
          this.$refs.dialog.open();
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
          this.$refs.dialog.open(row.id);
        },
        /** 详情按钮操作 */
        handleView(row) {
          this.$refs.dialog.open(row.id, true);
        },
        /** 删除按钮操作 */
        handleDelete(row) {
          const ids = row.id || this.ids;
          this.$modal.confirm('是否确认删除？').then(() => {
            this.loading = true;
            return delEquityCardBill(ids);
          }).then(() => {
            this.loading = false;
            this.getList();
            this.$modal.msgSuccess("删除成功");
          }).finally(() => {
            this.loading = false;
          });
        },
        /** 导出按钮操作 */
        handleExport() {
          const queryParams = this.queryParams;
          this.$modal.confirm('是否确认导出所有数字权益卡购卡账单查询数据项？').then(() => {
            this.exportLoading = true;
            return exportEquityCardBill(queryParams);
          }).then(response => {
            this.$download.name(response.msg);
            this.exportLoading = false;
          }).catch(() => {});
        } ,
        renderHeader(render,{column, $index }){
          let label = column.label;
          console.log('label',label)

          // 只有在指定的表头才显示提示
          let showIcon = false;
          // 每个表头提示显示的内容
          let content = [];
          // 渲染提示方法数组
          let array = [];
          // 表头提示预定义
          let list= [
              ['平台补贴=商户收入-（实际支付金额-服务费+积分抵扣金额）；（当补贴活动为商户补贴时，平台补贴为0）'],
              ['服务费=售价*费率（当补贴活动为商户补贴时，服务费为0）'],
              ['支付手续费=实付金额*0.54%'],
              ['平台收入=服务费-支付手续费-椰分抵扣金额-平台补贴；（当补贴活动为商户补贴时，平台收入=实付金额-支付手续费）'],
              ['商户收入=售价-服务费（当补贴活动为商户补贴时，商户收入为0）'],
             
          ];

          // 通过二维数组循环，定义好表头渲染
          for(let i=0;i<list.length;i++){
              let item = list[i];
              let obj = [];
              for(let k=0;k<item.length;k++){
                  obj.push(render('div',{},item[k]));
              };
              array.push(obj);
          };
          switch (label) {
              case '平台补贴':
                  showIcon = true;
                  content = array[0];
                  break;
              case '服务费（￥）':
                  showIcon = true;
                  content = array[1];
                  break;
              case '支付手续费（￥）':
                  showIcon = true;
                  content = array[2];
                  break;
              case '平台收入（￥）':
                  showIcon = true;
                  content = array[3];
                  break;
              case '商户收入（￥）':
                  showIcon = true;
                  content = array[4];
                  break;
          };
          return [
              label,
              // 第一个参数是标签名称，第二个参数是标签属性，第三个参数是标签内容
              render('el-tooltip',
                  {
                      props: {
                          content:(function() {
                              return  [
                                  render('div',
                                      {
                                          class:"tips-box"
                                      },
                                      // 根据上面的方法显示不同的内容
                                      content
                                  )
                              ]
                          })(),
                          placement: 'top'
                      }
                  },
                  [
                      render(
                          'span',{
                          class: {
                              // 通过变量控制表头是否显示提示
                              'el-icon-question': showIcon
                          }
                      })
                  ]
              )
          ]

          },

      }
    };
  
  </script>
  <style lang="scss" scoped>
    .head {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      padding: 20px 20px 0;
    }
  
    .listBox {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      //   height: 120px;
      padding: 20px 20px;
      margin-top: 10px;
    }
  
    .el-input {
      width: 390px;
    }
  
  </style>
  